<template>
  <div>
    v-debounce：
    <br />
    <br />
    默认触发click事件，延迟500ms：
    <button v-debounce="handleClick">
      bar
    </button>
    <br />

    自定义事件：
    <input v-debounce:input="handleInput" />
    <br />

    自定义属性，一开始触发一次，连续点击，时间重新计算，1s内不再触发
    <button
      v-debounce:[direction]="{
        delay: 1000,
        atBegin: true,
        handler: handleClick
      }"
    >
      bar
    </button>
    <button @click="handleDbClick">BUTTON</button>
    <br />
    <br />
    <br />
    <br />
    <br />
    v-throttle：
     <br />
    <br />
    默认触发click事件，延迟500ms：
    <button v-throttle="handleClick">
      bar
    </button>
    <br />
    自定义属性，一开始触发了一次，1s内不再触发, 1s后若点击没停, 则再触发
    <button
      v-throttle:[direction]="{
        delay: 1000,
        noTrailing: true,
        handler: handleClick
      }"
    >
      bar
    </button>

    <br />
    自定义属性，一开始触发了一次，1s内不再触发
    <button
      v-throttle:[direction]="{
        delay: 1500,
        debounceMode: true,
        handler: handleClick
      }"
    >
      bar
    </button>
    <br />
    <br />
    <br />
    <br />
    <br />
    v-input:
    <div >
      <input
        ref="input"
        v-model="name"
        v-debounce:input="handleInput"
        v-input="{
          min: 0,
          max: 10000
        }"
      />
      <button @click="changeInput">BUTTON</button>
    </div>
    <br />
    <br />
    <br />
    <br />
    <br />
    v-drag:
    <div class="parent-ref" ref="parentRef" style="position: relative;background: #999;width: 200px;height: 200px;">
      <div style="width: 100px;height: 100px;background-color: #cccccc;margin-top: 10px;"
        v-drag
      >点我拖动</div>
    </div>
    <br />
    <br />
    <br />
    <br />
    v-tooltip:
    <br />
    <br />
    <br />
     <span
      v-tooltip="{
        content: content,
        trigger: 'click'
      }"
    >
      {{ content }}
    </span>
    <button
      style="margin-left: 100px;"
      v-tooltip="{
        content: '这是自定义tooltip内容',
        placement: 'left',
      }"
    >
      这里显示tooltip
    </button>
     <button
      style="margin-left: 100px;"
      v-tooltip="{
        content: '这是自定义tooltip内容',
        placement: 'right',
      }"
    >
      这里显示tooltip
    </button>
    <button
      style="margin-left: 100px;width: 200px;"
      v-tooltip="{
        content: '这里显示tooltip这里显示tooltip这里显示tooltip这里显示tooltip这里显示tooltip',
        placement: 'bottom',
        width: '120px',
        zIndex: 6
      }"
    >
      这里显示tooltip这里显示tooltip这里显示tooltip这里显示tooltip这里显示tooltip
    </button>
    <button @click="nativagtion">跳转foo</button>
    <br />
    <br />
    v-outside:
    <br />
    <br />
    <button v-outside.click="handleClickOutside">
      <div>点击任何地方，改变这里的值{{ outside }}</div>
    </button>
    <div style="width: 500px;height: 500px;background-color: #999;text-align: center;" ref="outside-container">
      <button v-outside="{
        handler: handleClickOutside1,
        targetRef: 'outside-container'
      }">
        <div>点击指定区域，改变这里的值{{ outside1 }}</div>
      </button>
      <br />
      <br />
      <br />
      这里是指定区域
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        name: '12',
        direction: 'click',
        content: '这里显示tooltip',
        outside: 'jack',
        outside1: 'jack',
        x: 0,
        y: 0
      }
    },
    methods: {
      handleClick(e) {
       console.log('触发啦')
      },
      handleDbClick() {},
      handleInput() {
        console.log(this.name)
      },
      changeInput() {
        console.log(this.name)
      },
      nativagtion() {
        this.$router.push({
          path: '/foo'
        })
      },
      handleClickOutside(e) {
        this.outside = this.outside === 'jack' ? 'tom' : 'jack'
      },
      handleClickOutside1(e) {
        this.outside1 = this.outside1 === 'jack' ? 'tom' : 'jack'
      },
    }
  }
</script>

<style scoped>

</style>
